<!-- 首页 三个卡片组件 -->
<template>
  <div class="threeCard">
    <div class="card">
      <div>
        <h3 class="cardTil">
          {{ $t('home.InstantCollection') }}
        </h3>
        <p class="cardText">
          {{ $t('home.InstantCollectionInfo') }}
        </p>
      </div>
      <img class="cardImg" :src="home1img" alt="" style="margin-top: .8rem;">
    </div>
    <div class="card">
      <div>
        <h3 class="cardTil">
          {{ $t('home.EasyAPI') }}
        </h3>
        <p class="cardText">
          {{ $t('home.WeHandleAbstract') }}
        </p>
      </div>
      <img class="cardImg" :src="home3img" alt="">
    </div>

  </div>
</template>

<script setup>
// 导入图片，img 标签可以动态使用
import { home1img } from "@/utils/imgUrl.js";
import { home3img } from "@/utils/imgUrl.js";
</script>

<style lang="less" scoped>
.threeCard {
  display: flex;
  justify-content: space-evenly;
  gap: 0.1rem;

  .card {
    width: 49%;
    border: 1px solid #f0f0f0;
    border-radius: 10px;

    .cardTil {
      margin-top: 0.2rem;
      margin-bottom: 0.2rem;
      font-size: 0.26rem;
    }

    .cardText {
      width: 100%;
    }

    .cardImg {
      width: 100%;
      margin-top: 0.5rem;
    }

  }

}

/* h5 适配样式：当视口宽度小于 600px 时 */
@media (max-width: 600px) {

  .threeCard {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .card {
      width: 100%;
      min-height: 3rem;
      border: 1px solid #f0f0f0;
      border-radius: 10px;

      .cardTil {
        margin-top: 0.2rem;
        margin-bottom: 0.2rem;
        font-size: 0.26rem;
      }

      .cardText {
        width: 100%;
      }

    }

  }

}
</style>